<template>
  <div class="home">
    <div class="search-wrapper">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-select
          v-model="select"
          slot="prepend"
          placeholder="请选择"
          @change="changeType"
        >
          <el-option label="手机" value="1"></el-option>
          <el-option label="电脑" value="2"></el-option>
          <el-option label="美妆" value="3"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>

      <div class="shopCar">
        <el-badge :value="carValue" class="item" v-if="userInfo.type != 1">
          <el-button type="success" round @click="goShopCar"
            ><i class="el-icon-shopping-cart-2"></i> 购物车</el-button
          >
        </el-badge>
        <div class="manageBox" v-if="userInfo.type == 1">
          <el-button type="success" round @click="goodsOff">物品下架</el-button>
          <el-button type="success" round @click="goodsOn">物品上架</el-button>
          <el-button type="success" round @click="goodsNew">物品上新</el-button>
        </div>
      </div>
    </div>
    <el-scrollbar class="content">
      <ul class="ul-content">
        <el-checkbox-group v-model="checkList">
          <li
            class="li-content"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="getDetail(item)"
          >
            <el-checkbox :label="item.goodsCode" v-if="userInfo.type == 1">{{ "" }}</el-checkbox>
            <div class="coupon" v-if="item.delFlag == 1">已下架</div>
            <div class="coupon" v-else>领券</div>
            <img
              class="li-img"
              :src="item.goodsUrl"
              :alt="item.goodsBrand + item.goodsTitle"
            />
            <div class="li-sub">
              <div>
                ￥<span class="li-price">{{ item.goodsPrice }}</span>
              </div>
              <div>
                <span class="li-subTitle">{{ item.goodsBrand }}</span>
                <span class="li-subTitle">{{ item.subTitle }}</span>
              </div>
            </div>
            <div class="li-title">{{ item.goodsTitle }}</div>
            <div class="shopCarIcon">
              <i @click="delGoods(item)" v-if="userInfo.type == 1" class="el-icon-delete" title="删除商品"></i>
              <i @click="handleToCar(item)" v-else class="el-icon-shopping-cart-1"></i>
              
            </div>
          </li>
        </el-checkbox-group>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import {
  getGoods,
  updateStatus,
  getGoodsDetail,
  addGoodsToCar,
  getGoodsCarNum,
} from "@/api/goods";

export default {
  components: {},
  data() {
    return {
      manageFlag: true,
      input3: "",
      select: "1",
      goodsList: [],
      carValue: "",
      checkList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  async mounted() {
    let socket = new WebSocket("ws://192.168.101.17:5900");
    socket.onopen = function () {
      console.log("1. 客户端连接上了服务器", new Date().getTime());
      // socket.send('3. 你好')
    };
    socket.onmessage = function (e) {
      console.log("6", e);
    };
    await this.search();
    await this.getCarNum();
    console.log(this.userInfo);
  },
  methods: {
    async getCarNum() {
      let res = await getGoodsCarNum();
      this.carValue = res.data;
    },
    changeType(val) {
      this.search();
    },
    search() {
      let params = {
        type: this.select,
        name: this.input3,
        delFlag: this.userInfo.type
      };
      getGoods(params).then((res) => {
        this.goodsList = res.data;
      });
    },
    goShopCar() {
      this.$router.push({
        path: "/shopCar",
      });
    },
    async goodsOff() {
      let params = {
        codes: this.checkList,
        type: 1,
        status: '1'
      }
      await updateStatus(params)
      this.search()
    },
    async goodsOn() {
      let params = {
        codes: this.checkList,
        type: 1,
        status:'0'
      }
      await updateStatus(params)
      this.search()
    },
    goodsNew() {

    },
    getDetail(item) {
      let data = {
        goodsCode: item.goodsCode,
      };
      getGoodsDetail(data);
    },
    async handleToCar(item) {
      // if (item.limitNum) {
      //   let res = await getGoodsCarNum({ goodsCode: item.goodsCode });
      //   if (res.data == item.limitNum) {
      //     this.$message({
      //       type: "warning",
      //       message: "已超过抢购限制",
      //     });
      //     return;
      //   }
      // }
      let params = {
        goodsCode: item.goodsCode,
        type: this.select,
      };
      await addGoodsToCar(params);
      this.$message({
        type: "success",
        message: "添加成功",
      });
      await this.getCarNum();
    },
    getCoupon() {},
    delGoods() {}
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  margin-top: 20px;
  background-color: #f5f5f5;
}
::v-deep .el-select .el-input {
  width: 130px;
}
// ::v-deep .input-with-select .el-input-group__prepend {
//     background-color: #fff;
//   }
.search-wrapper {
  // margin-top: 20px;
  // height: 90px;
  line-height: 90px;
  text-align: center;
  background: url("@/image/img1.jpeg");
  position: relative;
  ::v-deep .input-with-select {
    width: 800px;
  }
  .shopCar {
    line-height: normal;
    color: #fff;
    margin-right: 20px;
    position: absolute;
    top: 25px;
    right: 50px;
    .manageBox {
      display: inline-block;
      margin-left: 10px;
    }
  }
}
.content {
  overflow-y: auto;
  height: calc(100% - 110px);
  .ul-content {
    width: 1200px;
    margin: auto;
    padding: 0;
    margin-bottom: 20px;
  }
  .li-content {
    list-style: none;
    display: inline-block;
    background-color: #fff;
    margin: 10px 10px;
    padding: 10px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    .el-checkbox {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    .coupon {
      position: absolute;
      font-size: 12px;
      transform: rotate(45deg);
      top: -40px;
      right: -40px;
      background-color: orange;
      width: 80px;
      height: 80px;
      line-height: 130px;
      text-align: center;
      cursor: pointer;
    }
    .li-img {
      width: 200px;
      height: 200px;
    }
    .li-sub {
      color: #999;
      font-size: 12px;
      .li-price {
        color: #000;
        font-size: 18px;
      }
      .li-subTitle {
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
  .shopCarIcon {
    text-align: right;
    cursor: pointer;
    /deep/ .el-icon-shopping-cart-1 {
      font-size: 24px;
    }
    /deep/ .el-icon-delete {
      font-size: 24px;
    }
  }
}
</style>
